<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
</head>
<body> -->
    <table class="layui-hide" id="Teacher" lay-filter="tblTea"></table>
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="btnUpdateTea">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="btnAddTea">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="btnDeleteTea">删除</button>
      </div>
    </script>
    
    
    <!-- <script type="text/javascript" src="layui-v2.5.7/layui/layui.js"></script> -->
    <script>
    var data=null;//把选中行数据定义为全局变量，为了弹出页面能parent.来获取变量
    var table=null;//全局
          layui.use(['table','jquery'], function(){
              table = layui.table;
              var $ = layui.jquery;
              table.render({
                elem: '#Teacher'
                ,url:'http://localhost:8080/getTea'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                          title: '提示'
                          ,layEvent: 'LAYTABLE_TIPS'
                          ,icon: 'layui-icon-tips'
                        }]
                ,cols: [[
                //field:'id'数据属性
                  {type:'checkbox'}
                  ,{field:'teaId', width:100, title: '编号ID'}
                  ,{field:'teaName', width:100, title: '教师姓名'}
                  ,{field:'teaSex', width:150, title: '教师性别'}
                  ,{field:'teaAge', width:100, title: '教师年龄'}
                  ,{field:'teaTel',width:100, title: '教室电话'} 
                  ,{field:'teaMail',width:100, title: '教师邮箱'}
                  ,{field:'teaMaster',width:100, title: '教师职称'}
                  ,{field:'teaAccount',width:100, title: '教师账号'}
                  ,{field:'teaPsw',width:100, title: '教师密码'}
                  ,{field:'teaHiredate',width:100, title: '入职时间'}
                  ,{field:'teaRole',width:100, title: '角色'}//minWidth：局部定义当前单元格的最小宽度
                ]]
              ,page:true
              ,limit:5
              ,limits:[5,10,15,20]
              });
              
            //头工具栏事件
              table.on('toolbar(tblTea)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                  case 'btnUpdateTea':
                      if(checkStatus.data.length>0){
                     data = checkStatus.data[0];
                    //layer.alert(JSON.stringify(data));
                     /* type:0：信息框，默认
                            1：页面层
                            2：iframe层
                            3：加载层
                            4：tips层 */
                         layer.open({
                            type: 2 //此处以iframe举例
                            ,title: '修改教师信息'
                            ,area: ['500px', '900px'] //窗口的宽高
                            ,shade: 0.5    //点开窗口背景阴影
                            ,maxmin: true  //是否显示最大化和最小化按钮
                            ,offset: [ //为了演示，随机坐标
                              Math.random()*($(window).height()-500)
                              ,Math.random()*($(window).width()-500)
                            ] 
                            ,content: 'teaUpdate.html'
                            //,btn: ['确认修改', '取消'] //只是为了演示
                            ,yes: function(){
                              $(that).click(); 
                            }
                            ,btn2: function(){
                              layer.closeAll();
                            }
                        
                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero){
                          layer.setTop(layero); //重点2
                        }
                      });
                      }else{
                          layer.msg("请选择要修改的信息");
                      }
                  break;
                  case 'btnAddTea':
                    //var data = checkStatus.data;
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '添加教师'
                        ,area: ['600px', '900px'] //窗口的宽高
                        ,shade: 0.5    //点开窗口背景阴影
                        ,maxmin: true  //是否显示最大化和最小化按钮
                        ,offset: [ //为了演示，随机坐标
                          Math.random()*($(window).height()-500)
                          ,Math.random()*($(window).width()-500)
                        ] 
                       ,content: 'teaAdd.html'
                       // ,btn: ['确认添加', '取消'] //只是为了演示
                        ,yes: function(){
                          $(that).click(); 
                        }
                        ,btn2: function(){
                          layer.closeAll();
                        }
                    });
                  break;
                  case 'btnDeleteTea':
                      layer.confirm('确认要删除选中的信息吗?', function(index){
                          if(checkStatus.data.length>0){  
                              var arr = checkStatus.data;
                              var arrTeaId = [];
                               //循环取出所有选中行的主键
                              for(var i=0; i<arr.length; i++){
                                  var teaId = arr[i].teaId;
                                  arrTeaId.push(teaId);
                              }
                               
                               $.ajax({
                                   url:'http://localhost:8080/deleteTea',
                                   type:'post',
                                   dataType:'JSON',
                                   data:{
                                       teaIds:arrTeaId.join(",")
                                   },
                                   success:function(result){
                                       //关闭窗口
                                          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                          parent.layer.close(index); //再执行关闭   
                                          //刷新列表
                                          parent.table.reload("Teacher",{
                                              page:{
                                                  curr:1  //指定表格刷新到第几页
                                              }
                                          });
                                   }
                               })
                               
                          }else{
                              layer.msg("请选择要删除的行");
                          }
                          
                          layer.close(index);
                       });
                  break;
                  
                };
              });
                });
            
          
    </script>
    <!-- </body>
    </html>